<template>
    <view class="container">
        <z-paging>
            <view class="headBox" slot="top">
                <!-- 搜索 -->
                <view class="search flex_wrap">
                    <view class="search_t">
                        <view
                            style="width: 568rpx; margin: 10rpx 0 0 20rpx"
                            @click="doSearch"
                        >
                            <u-input
                                prefixIcon="search"
                                border="none"
                                disabled
                                prefixIconStyle="font-size: 48rpx;color: #999"
                                placeholderStyle="font-size: 28rpx;color: #999"
                                :customStyle="{ background: '#fff' }"
                                placeholder="点击搜索"
                            ></u-input>
                        </view>
                        <view class="search_type" @click="doSearch">
                            搜索
                        </view>
                    </view>
                </view>
				
				
				<!-- 主体部分 -->
				<view class="flex_wrap row_middle topBoxs">
					<view :style="{width:item.name == '全部' ? '178rpx' : '143rpx'}"
				                    :class="topTabCurrent == index ? 'topBoxActive' : ''"
				                    @click="topChangeTab(index, item)" v-for="(item, index) in topTabList" :key="index">
						<u-icon
							:label="item.name"
							size="48rpx"
							:name="topTabCurrent == index ? item.activeUrl : item.url"
							labelSize="24rpx"
							:labelColor="topTabCurrent == index ? '#588BF3' : '#777777'"
							labelPos="bottom"
						/>
					</view>
				</view>
            </view>
			
            <view class="body">
                <!-- 左侧分类 -->
                <view class="leftTab">
                    <scroll-view scroll-y="true" class="tabBox">
                        <block v-for="(item, index) in tabList" :key="index">
                            <view
                                class="tabItems"
                                :class="tabCurrent == index ? 'tabActives' : ''"
                                @click="changeTab(index, item)"
                            >
								<view class="tabItem" :class="tabCurrent == index ? 'tabActive' : ''">
									{{ item.name }}
								</view>
                            </view>
							<!-- <view
							    class="tabItem"
								:style="{backgroundImage:item.code == '149' ? `url(${item.bgImg})` : '' }"
								:class="item.code == '149' ? 'shuang' :(tabCurrent == index ? 'tabActive' : '')"
							    @click="changeTab(index, item)"
							>
							    {{ item.code == '149' ? '' : item.description }}
							</view> -->
                            <view v-if="tabCurrent == index">
                                <block
                                    v-for="(item1, v) in item.children"
                                    :key="v"
                                >
                                    <view
                                        class="tabItem1"
										:style="{color:tabCurrent1 == v ? '#588bf3' : ''}"
                                        @click="changeTab1(v, item1)"
                                    >
                                        {{ item1.name }}
                                    </view>
									<view :class="tabCurrent1 == v ? 'tabItem1Line' : ''"></view>
                                </block>
                            </view>
                        </block>
                    </scroll-view>
                </view>
                <!-- 右侧商品 -->
                <view class="rightGoods">
                    <scroll-view
                        scroll-y="true"
                        class="whiteBox"
                        @scrolltolower="scrollBottom"
                    >
                        <block v-for="(item, index) in dataList" :key="index">
                            <view class="item" @tap="to_goodsDetail(item.id)">
                                <u-image
                                    height="176rpx"
                                    width="176rpx"
                                    :src="item.thumbnail"
                                    mode="aspectFill"
                                    radius="10rpx"
                                />
                                <view class="celldetail-t">
                                    <view class="goodName">{{
                                        item.goodsName
                                    }}</view>
                                    <view class="celldetail_money">
                                        <text style="font-size: 24rpx">￥</text>
                                        <text
                                            style="
                                                font-size: 34rpx;
                                                font-weight: 600;
                                            "
                                            >{{ goodsSkuListPrice(item) }}</text
                                        >
                                        <text style="font-size: 18rpx">起</text>
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                </view>
            </view>
            <view class="carBtn" @click="to_goodsCar">
                <u-image
                    height="158rpx"
                    width="158rpx"
                    src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/07/17/80abb656ec514a54a6a56a3eef0d0ae0.png"
                    mode="aspectFill"
                />
            </view>
        </z-paging>
    </view>
</template>

<script>
import {
    getGoodsListApi,
    getGoodsTypeListApi,
    getGoodsListApiNologin,
    getGoodsOpenTypeListApi,
} from "@/api/shop.js";
import { appIdCard } from "@/api/card";
import { formatDecimal } from "@/utils/index.js";
import { chickUrl } from "@/config/tendIdConfig.js";
import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js";
import { encryption } from "@/utils/encryption.js";
import { mapState } from "vuex";
import caches from "@/config/caches.js";
import { shopType } from "@/utils/shopType.js";
import { enterprise } from '@/api/enterprise.js';
let tenantId;
export default {
    data() {
        // 安全地获取 appId
        let appId = ''
        try {
            if (typeof uni.getAccountInfoSync === 'function') {
                const accountInfo = uni.getAccountInfoSync()
                if (accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.appId) {
                    appId = accountInfo.miniProgram.appId
                }
            }
        } catch (e) {
            console.warn('获取 appId 失败:', e)
        }
        
        return {
            appid: appId,

            // 轮播图
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
            dataList: [],
            // 分类列表
            // tabList: shopType,//24/11/4
            tabList: [],
            topTabCurrent: 0,
            tabCurrent: 0,
            tabCurrent1: 0,
            cellIconStyle: {
                width: "36rpx",
                height: "36rpx",
                marginRight: "14rpx",
            },
            cellTitleStyle: {
                fontSize: "28rpx",
                color: "#333",
            },
            goodsData: {
                // 商品数据
                pageSize: 10,
                pageNum: 1,
                tenantId: "",
            },
            goodsTotal: 0, // 商品总数
            fromStore: false, //为真 从门店来
            hasMore: true,
			topTabList:[
				{
					name:'全部',
					value:''
				},
				{
					name:'精准检测',
					url:'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/6ad15fa9fb06413a85f8369b9c126f24.png',
					activeUrl:'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/88779e723a2442a6a530e6f45c5f5560.png',
					value:1
				},
				{
					name:'精准筛查',
					url:'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/61f83b60a2ee45b7b5cf1d593167b774.png',
					activeUrl:'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/d4e24e4ba49b4ecc9664887b370bb6b7.png',
					value:2
				},
				{
					name:'精准干预',
					url:'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/3dc67c1649dc4de19be958c32c717832.png',
					activeUrl:'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/c8242f62a1354b71b01513093e3389d4.png',
					value:3
				},
				{
					name:'精准医养',
					url:'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/3d6d50c6a6604eef90749b68569d1313.png',
					activeUrl:'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/274018048ffe448a9d435842d102b8a3.png',
					value:4
				}
			]
        };
    },
    computed: {
        ...mapState(["isLogin", "phone", "tabName", "authority"]),
        goodsSkuListPrice() {
            return (item) => {
                const money = item.minPrice || item.price;
                return formatDecimal(numDiv(money, 100));
            };
        },
    },
    beforeDestroy() {
        if (this.isLogin) {
            uni.removeStorageSync("loginBackUrl");
            uni.removeStorageSync("loginBackUrlOption");
        }
    },
    onLoad() {
        var pages = getCurrentPages(); // 获取栈实例
        if (pages.length === 1) {
            let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
            let currentPage = pages[pages.length - 1]["$page"]["fullPath"]; //当前页面路径(带参数)
            uni.setStorageSync("loginBackUrl", currentPage);
        }
		this.getEnterprise()
    },
    created() {
        this.queryList();
    },
    methods: {
		async getEnterprise() {
			//商城分类
			getGoodsTypeListApi(this.$wxConfig.tendId).then((res) => {
				if (res.code === 200) {
					this.tabList = [{
						id: 0,
						code: "",
						name: "全部",
						value: "",
						children:[]
					}].concat(res?.data ?? [])
				}
			}) 
		},
        to_goodsCar() {
            if (!this.isLogin)
                return uni.navigateTo({
                    url: "/pages/user/phone/indexApp",
                });
            uni.navigateTo({
                url: "/pages_shop1/goodsCar/index",
            });
        },
        // 跳转搜索页面
        doSearch() {
            uni.navigateTo({
                url: "/pages_shop1/search/search",
            });
        },
        to_goodsDetail(e) {
            //去详情先判断是否登录
            // if (!this.isLogin)
            //     return uni.navigateTo({
            //         url: "/pages/user/phone/indexApp",
            //     });
            uni.$u.route({
                url: `pages_shop1/goods/index?id=${e}`,
            });
        },
        async queryList(pageNum, pageSize) {
            this.goodsData = {
                ...this.goodsData,
                tenantId: this.$wxConfig.tendId,
                queryType: 2, //查询范围 (0:查询所有商品 1:查询业务员自己勾选的商品 2:之前的租户模式 :查询热推商品)
                // status: 0, //商品状态。@下架;1上架;2删除
                // submitStatus: 1, //提交状态,草稿;1提交
                // goodsSource: 0, //商品来源，十蜂商品，1企业礼品
                // goodsFlag: 0, //商品标记,0十蜂礼品;1企业礼品
            };

            const result = uni.getStorageSync(caches.ACCESS_TOKEN)
                ? await getGoodsListApi(this.goodsData)
                : await getGoodsListApiNologin(this.goodsData); //根据是否登录调不同接口
            this.total = result.data.total;
            //   判断还有没有下一页
            if (result.data.rows == null || result.data.rows.length == 0) {
                this.hasMore = false;
                return;
            }
            //   分页之后，数据拼接
            this.dataList = [...this.dataList, ...result.data.rows];
        },
        async changeTab(index, item) {
            // if (!this.isLogin)
            //     return uni.navigateTo({
            //         url: "/pages/user/phone/indexApp",
            //     });
            this.tabCurrent = index;
            this.tabCurrent1 = 0;
            this.goodsData.goodsTypeCode = item.code;
			
			if(this.tabList[index].children.length > 0){
				this.goodsData.goodsTypeCode = this.tabList[index].children[0].code;
			}
            item.name === "全部" && delete this.goodsData.goodsTypeCode;
            this.goodsData.pageNum = 1;
            this.goodsData.pageSize = 10;
            this.dataList = [];
            this.hasMore = true;
            this.queryList();
        },
		async topChangeTab(index, item) {
		    // if (!this.isLogin)
		    //     return uni.navigateTo({
		    //         url: "/pages/user/phone/indexApp",
		    //     });
		    this.topTabCurrent = index;
		 //    this.tabCurrent = 0 
			// this.tabCurrent == 0 && delete this.goodsData.goodsTypeCode;  25/6/17
			this.goodsData.mainCategory = item.value;
		    item.name === "全部" && delete this.goodsData.mainCategory;
		    this.goodsData.pageNum = 1;
		    this.goodsData.pageSize = 10;
		    this.dataList = [];
		    this.hasMore = true;
		    this.queryList();
		},
        async changeTab1(index, item1) {
            this.tabCurrent1 = index;
            this.goodsData.goodsTypeCode = item1.code;
            this.goodsData.pageNum = 1;
            this.goodsData.pageSize = 10;
            this.dataList = [];
            this.hasMore = true;
            this.queryList();
        },
        // 商品触底
        scrollBottom() {
            console.log("商品触底");
            if (this.hasMore) {
                this.goodsData.pageNum += 1;
                this.queryList();
            } else {
                uni.showToast({
                    title: "没有数据了",
                    icon: "none",
                });
            }
        },
    },
};
</script>

<style lang="scss">
.headBox {
    position: relative;
    background-color: #F4F8F9;
}

.body {
    display: flex;
    justify-content: space-between;

    .leftTab {
        width: 178rpx;
        height: 88vh;
        background: #F4F8F9;
        box-sizing: border-box;

        .tabBox {
            height: 100%;

            .tabItems {
                text-align: center;
                padding: 20rpx;
                color: #333;
                font-size: 28rpx;
				height: 120rpx;
            }
			.tabActives{
				background-color: #fff;
			}
			.tabItem {
			    height: 80rpx;
			    line-height: 80rpx;
			}
            .tabActive {
                background: #588bf3;
				border-radius: 8rpx;
                color: #ffffff;
            }
			.shuang{
				width: 100%;
				height: 90rpx;
				// background-image: url("https://test-health-s.oss-cn-hangzhou.aliyuncs.com/2024/10/31/afb8f7b31f7e4feaab8bed199489747a.jpg");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}

            .tabItem1 {
                text-align: center;
                padding: 44rpx 0 12rpx;
                color: #999;
                font-size: 28rpx;
            }
			.tabItem1Line{
				margin: 0 auto;
				width: 48rpx;
				height: 4rpx;
				background: #588BF3;
			}
        }
    }

    .rightGoods {
        width: 573rpx;
        height: 88vh;
        box-sizing: border-box;
		background: #fff;
		border-radius: 8rpx 0 0 0;

        .whiteBox {
            height: 100%;
            padding: 0 25rpx;
            box-sizing: border-box;

            .item {
                background-color: #fff;
                margin-bottom: 24rpx;
                border-radius: 16rpx;
                display: flex;
                padding: 12rpx;

                .celldetail-t {
                    width: 100%;
                    padding: 0 6rpx 0 12rpx;
                    box-sizing: border-box;

                    .goodName {
                        width: 100%;
                        font-size: 28rpx;
                        color: #333;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                        height: 80rpx;
                    }

                    .celldetail_money {
                        margin-top: 40rpx;

                        text {
                            color: #ff0000;
                            font-size: 18rpx;
                            font-weight: 400;
                        }
                    }
                }
            }
        }
    }
}

.search {
    padding: 40rpx 28rpx 30rpx;
    position: relative;
}

.search_t {
    background: #fff;
    border-radius: 64rpx;
    font-weight: none;
    display: flex;
    justify-content: space-between;
}

.search_type {
    width: 104rpx;
    height: 64rpx;
    background: #588bf3;
    border-radius: 0px 64rpx 64rpx 0px;
    color: #fff;
    line-height: 64rpx;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
}
.carBtn {
    position: fixed;
    bottom: 30rpx;
    right: 30rpx;
}
// 上部分导航
.topBoxs{
	height: 110rpx;
	width: 100%; 
	background: #F4F8F9;
}
.topBoxActive{
	height: 110rpx;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
